<template>
    <div class="chart-container">
        <chart id="moreCircleEchart" :height="data.options.height+'px'" :data="data" :width="data.options.width+'px'" :options="data.options"/>
    </div>
</template>

<script>
import {getNewEcharts} from '@/api/api'
import echart from '@/mixins/echart'
let data = [{
    name: "本科及以上",
    value: 13211
},
{
    name: "高中",
    value: 42111
},
{
    name: "初中及以下",
    value: 81711
},
{
    name: "其他",
    value: 121711
},
];
let arrName = getArrayValue(data, "name");
let arrValue = getArrayValue(data, "value");
let sumValue = eval(arrValue.join('+'));
let objData = array2obj(data, "name");
let optionData = getData(data);
function getArrayValue(array, key) {
var key = key || "value";
var res = [];
if (array) {
    array.forEach(function(t) {
        res.push(t[key]);
    });
}
return res;
}

function array2obj(array,key) {
var resObj = {};
for(var i=0;i<array.length;i++){
    resObj[array[i][key]] = array[i];
}
return resObj;
}

function getData(data) {
var res = {
    series: [],
    yAxis: []
};
for (let i = 0; i < data.length; i++) {
    res.series.push({
        name: '学历',
        type: 'pie',
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: [80 - i * 15 + '%', 72 - i * 15 + '%'],
        center: ["50%", "55%"],
        label: {
            show: false
        },
        itemStyle: {
            label: {
                show: false,
            },
            labelLine: {
                show: false
            },
            borderWidth: 10,
        },
        data: [{
            value: data[i].value,
            name: data[i].name
        }, {
            value: sumValue - data[i].value,
            name: '',
            itemStyle: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0
            },
            tooltip: {
                show: false
            },
            hoverAnimation: false
        }]
    });
    res.series.push({
        name: '',
        type: 'pie',
        silent: true,
        z: 1,
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: [80 - i * 15 + '%', 72 - i * 15 + '%'],
        center: ["50%", "55%"],
        label: {
            show: false
        },
        itemStyle: {
            label: {
                show: false,
            },
            labelLine: {
                show: false
            },
            borderWidth: 10,
        },
        data: [{
            value: 7.5,
            itemStyle: {
                color: "#E3F0FF",
                borderWidth: 0
            },
            tooltip: {
                show: false
            },
            hoverAnimation: false
        }, {
            value: 2.5,
            name: '',
            itemStyle: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0
            },
            tooltip: {
                show: false
            },
            hoverAnimation: false
        }]
    });
    res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%");
}
return res;
}
export default {
    name: 'moreCircleEchart',
    mixins: [echart],
    created(){
        this.data.options.series = optionData.series
        this.data.options.yAxis[0].data = optionData.yAxis
        this.data.options.legend.data = arrName
        this.data.options.legend.formatter = function(name) {
            return "{title|" + name + "}\n{value|" + (objData[name].value) + "人}"
        }
    },
    methods: {
        _getNewEcharts(){
            const parms = {
                echartType:"pie",
                sourceId:this.data.options.sourceId
            }
            getNewEcharts(parms).then(res=>{
                if(res.rcode=='0000'){
                    this.data.options.series[0].data = res.data.seriesData
                    this.data.options.legend.data = res.data.legendData
                    
                }
            })
        }
    }
}
</script>
